<script setup>
import { useVueFlow } from '@vue-flow/core';
import { NodeResizer } from '@vue-flow/node-resizer';
import Icon from '../icon/Icon.vue';

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  data: {
    type: Object,
  },
})

const { removeNodes, updateNodeData } = useVueFlow()

function onSelect(color) {
  updateNodeData(props.id, { color, isGradient: false })
}

function onGradient() {
  updateNodeData(props.id, { isGradient: true })
}

const dataRef = ref(props.data)
</script>

<template>
  <NodeResizer
    min-width="500"
    min-height="500"
    color="#000"
  />

  <div class="node-group-div">
    <VsRow>
      <VsCol
        vs-type="flex"
        vs-justify="center"
        vs-align="center"
        vs-w="12"
      >
        <Icon
          v-if="false"
          name="common"
          style="block-size: 24px;inline-size: 24px;"
        />
        &nbsp;
        {{ dataRef.name }}
        
        <div @click.stop.prevent="() => removeNodes(props.id)" style="position: absolute;inset-block-start: 10px;inset-inline-end: 0;">
          <Icon
            name="close"
            style="position: absolute;inset-inline-end: 10px;"
          />
        </div>
        
      </VsCol>
    </VsRow>
  </div>
</template>

<style>
.node-group-div{
  padding: 10px;
  border: 1px solid #000;
  border-radius: 4px;
  background-color: rgba(16, 185, 129, 50%);
  block-size: 100%;
  color: #000;
  inline-size: 100%;
}

.icon-close{
  position: absolute;
  inset-inline-end: 10px;
}
</style>
